<template>
	<view class="page">
		<view class="list-box">
			<view class="item-box" @tap="goDetail(item)" v-for="(item,index) in listData" :key="item.id">
				<image class="item-box_cover" :src="item.list_pic_url"></image>
				<view class="u-line-1 item-box_name">{{item.name}}</view>
				<view class="item-box_price">￥{{item.retail_price}}</view>
			</view>
		</view>
		<uni-load-more :status="loadStatus"></uni-load-more>
	</view>
</template>

<script>
	import {getCollectListApi} from '@/api/user.js'
	import {mapState} from 'vuex'
	export default {
		computed: {
			...mapState(['user_id','token'])
		},
		data() {
			return {
				page: 1,
				isLoadEnd: false,
				listData: [],
				loadStatus: 'more'
			};
		},
		onLoad() {
			this.getListData()
		},
		onPullDownRefresh() {
			this.page = 1
			this.isLoadEnd = false
			this.getListData()
		},
		onReachBottom() {
			if(this.isLoadEnd) return
			this.page++
			this.getListData()
		},
		methods: {
			goDetail({goods_id,name}) {
				uni.navigateTo({
					url: `/pages/aPackage/goodsDetail/goodsDetail?goods_id=${goods_id}&goods_name=${name}`
				})
			},
			async getListData() {
				this.loadStatus = 'loading'
				const res = await getCollectListApi({
					page: this.page,
					user_id: this.user_id,
					token: this.token
				})
				this.loadStatus = 'more'
				const {pagetotal = 1, data = []} = res.data
				if(this.page >= pagetotal) {
					this.loadStatus = 'no-more'
					this.isLoadEnd = true
				}
				this.listData = data
			}
		}
	}
</script>

<style lang="scss" scoped>
.list-box {
	display: flex;
	flex-wrap: wrap;
	.item-box {
		width: 375rpx;
		padding: 20rpx;
		box-sizing: border-box;
		&_cover {
			width: 100%;
			height: 350rpx;
		}
		&_name {
			font-size: 28rpx;
			color: #333333;
			margin-top: 20rpx;
		}
		&_price {
			font-size: 24rpx;
			color: #f2270c;
			margin-top: 10rpx;
		}
	}
}
</style>
